<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example 01.02 -First Scen e</title>
    <script src="./javascripts/three.js"></script>
    <script src="./javascripts/stats.js"></script>
    <script src="./javascripts/dat.gui.js"></script>
    <script src="./javascripts/jquery-1.9.0.js"></script>
    <style>
        body{
            margin:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output">
</div>
<div><p hidden="hidden" id="speed">0</p></div>
<script >
    function initStats() {
        var stats=new Stats();
        stats.setMode(0);
        stats.domElement.style.position='absolute';
        stats.domElement.style.left='0px';
        stats.domElement.style.top='0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }
    $(function () {
        var stats = initStats();
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor('white', 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
//        var axes=new THREE.AxisHelper(20);
//        scene.add(axes);


        var planeGeometry = new THREE.PlaneGeometry(300, 200, 1, 1);
        var planeMaterial = new THREE.MeshPhongMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        scene.add(plane);

//        var cubeGeometry=new THREE.CubeGeometry(4,4,4);
//        var cubeMaterial=new THREE.MeshLambertMaterial({color:0xff0000});
//        var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
//        cube.castShadow=true;
//        cube.position.x=2;
//        cube.position.y=3;
//        cube.position.z=0;
//        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.castShadow = true;
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        scene.add(sphere);

        camera.position.x = -300;
        camera.position.y = 400;
        camera.position.z = 300;
        camera.lookAt(scene.position);

        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        var ambientLight=new THREE.AmbientLight('#0c0c0c');
        scene.add(ambientLight);

        var pointLight=new THREE.PointLight('#ffc0f6',3,200);
        pointLight.position=new THREE.Vector3(0,100,0);
        pointLight.castShadow=true;
        scene.add(pointLight);

        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
        };

        var gui = new dat.GUI();
        gui.add(controls, 'rotationSpeed', -0.5, 0.5);
        gui.add(controls, 'bouncingSpeed', -100, 100);

        function a() {
            $.ajax({
                url: '/users/time',
                data:{vall:n},
                dataType: 'json',
                success: function (s) {
                    document.getElinnerHTMLementById('speed').innerHTML = s.sp;
                }
            });
        }

        var step=0;
        var n=0;
        function renderScene() {
            stats.update();

//            cube.rotation.x+=controls.rotationSpeed;
//            cube.rotation.y+=controls.rotationSpeed;
//            cube.rotation.z+=controls.rotationSpeed;
            a();
            n++;
            step+=parseFloat(document.getElementById('speed').innerHTML);
            sphere.position.z=(Math.sin(step*Math.PI/3000)*60+4);
            sphere.position.x=(Math.cos(step*Math.PI/3000)*60+5);
            requestAnimationFrame(renderScene);
            renderer.render(scene,camera);
        }

        $("#WebGL-output").append(renderer.domElement);
        renderScene();
    });

</script>
</body>
</html>